fix: Add react ErrorBoundary Component to prevent app crashes from unhandled errors #958

monu808 · 2026-01-05T19:40:08Z

Hi @rahulharpal1603 here is the brief summary and related screenshots and videosfor this pr and issue.

Summary:
Added a React ErrorBoundary component to catch unhandled JavaScript errors during rendering, preventing the app from crashing to a blank white/black screen depends on the theme.

Fixes: #937

Changes Made:

Added ErrorBoundary component to catch errors
Added a fallback UI with animated button to reload in case error vanishes.
Instead of loggin error on UI, logged errors to console.
Added index.ts file, provide clean re-export for cleaner imports elsewhere in the app when a crash happens
wrapped app with error boundary component to prevent crash.
Imported ErrorBoundary Component.
Wrapped children inside themeprovider for same theme of fallback UI.
catches rendering error in any child component.

Files Modified/Created:

App.tsx(Modified)
ErrorBoundary.tsx(Created)
index.ts(Created)

Screenshots:
Before:

White/Black blank screen forgot to take SS as i fixed it🥲
After:

-

Demo:

Recording.2026-01-06.010312.1.mp4

How to Test:

Run the app: npm run tauri dev
Add this test code to any component (e.g., Home.tsx):
// Add this inside the component, before the return statement
throw new Error('Test ErrorBoundary');

Summary by CodeRabbit

Release Notes

New Features
- Added comprehensive error handling to the application with a user-friendly fallback display.
- Users can now retry the application when unexpected errors occur to quickly recover.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

- Added a fallback UI with animated button to reload in case error vanishes. - Instead of loggin error on UI logged errors to console.

…n a crash happens

- Imported ErrorBoundary Component. - Wrapped children inside themeprovider for same theme of fallback UI. - catches rendering error in any child component.

coderabbitai · 2026-01-05T19:40:29Z

📝 Walkthrough

Walkthrough

Introduces an ErrorBoundary React component to catch and handle application errors. The component wraps the main App with fallback UI, error logging, and a retry mechanism. Integrates the boundary into the app initialization flow.

Changes

Cohort / File(s)	Summary
App Integration `frontend/src/App.tsx`	Wraps existing app content (QueryClientProviders, BrowserRouter, routes) within the new ErrorBoundary component for application-wide error handling.
ErrorBoundary Component `frontend/src/components/ErrorBoundary/ErrorBoundary.tsx`	New class-based component implementing error boundary pattern with state for error tracking and retry workflow. Captures errors via `getDerivedStateFromError` and `componentDidCatch`, provides fallback UI with reload button, and includes retry logic with loading state.
Component Export `frontend/src/components/ErrorBoundary/index.ts`	Barrel export file re-exporting ErrorBoundary as named export for public module access.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~15 minutes

Poem

🐰 Errors now caught with grace and care,
A boundary stands, beyond compare,
When chaos strikes, we don't despair,
Just hit retry—the app's still there! 🎉

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately describes the main change: adding a React ErrorBoundary component to prevent app crashes from unhandled errors, which aligns with all file modifications.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.

✨ Finishing touches

📝 Generate docstrings

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

coderabbitai

Actionable comments posted: 1

Fix all issues with AI Agents 🤖

In @frontend/src/components/ErrorBoundary/ErrorBoundary.tsx:
- Around line 34-41: The button labeled "Reload App" currently triggers a soft
reset in handleRetry (clearing hasError / error and isRetrying via setState)
which doesn't perform a full page reload; change handleRetry to perform a real
app reload by calling window.location.reload() (optionally after a short
setTimeout to show the spinner) instead of only resetting state so the button
label matches behavior and persistent child errors are cleared by a full
refresh.

🧹 Nitpick comments (1)

frontend/src/components/ErrorBoundary/ErrorBoundary.tsx (1)
25-27: Consider removing redundant isRetrying: false from error state.

The isRetrying: false assignment in getDerivedStateFromError is redundant since the state will either be freshly initialized (already false) or transitioning from a retry attempt (where it will be overridden anyway).
🔎 Simplified implementation
 static getDerivedStateFromError(error: Error): Partial<ErrorBoundaryState> {
-  return { hasError: true, error, isRetrying: false };
+  return { hasError: true, error };
 }

📜 Review details

Configuration used: defaults

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 4bdf1d3 and 6bcd0e8.

📒 Files selected for processing (3)

frontend/src/App.tsx
frontend/src/components/ErrorBoundary/ErrorBoundary.tsx
frontend/src/components/ErrorBoundary/index.ts

🔇 Additional comments (5)

frontend/src/components/ErrorBoundary/ErrorBoundary.tsx (3)

1-13: LGTM! Clean imports and well-defined interfaces.

The component imports are appropriate, and the TypeScript interfaces clearly define the props and state structure for the error boundary.

29-32: LGTM! Proper error logging implementation.

The error logging to console is appropriate and aligns with the PR objective to log errors without displaying them in the UI.

43-73: LGTM! Well-structured fallback UI with proper theming.

The render method provides a clean, user-friendly fallback UI with appropriate theme integration. The decision to log errors to console rather than displaying them in the UI follows the stated PR objective.

frontend/src/App.tsx (1)

6-6: LGTM! ErrorBoundary is correctly integrated.

The ErrorBoundary is properly placed inside ThemeProvider and wraps all main application content, ensuring comprehensive error protection while maintaining access to the theme context for the fallback UI.

Also applies to: 23-37

frontend/src/components/ErrorBoundary/index.ts (1)

1-1: LGTM! Standard barrel export pattern.

The barrel export provides a clean public API for importing the ErrorBoundary component.

frontend/src/components/ErrorBoundary/ErrorBoundary.tsx

monu808 added 3 commits January 6, 2026 00:30

Added ErrorBoundary component to catch errors

94f340b

- Added a fallback UI with animated button to reload in case error vanishes. - Instead of loggin error on UI logged errors to console.

Provide clean re-export for cleaner imports elsewhere in the app whe…

0859d0e

…n a crash happens

wrapped app with error boundary component to prevent crash.

6bcd0e8

- Imported ErrorBoundary Component. - Wrapped children inside themeprovider for same theme of fallback UI. - catches rendering error in any child component.

github-actions bot added enhancement New feature or request frontend labels Jan 5, 2026

coderabbitai bot reviewed Jan 5, 2026

View reviewed changes

frontend/src/components/ErrorBoundary/ErrorBoundary.tsx Show resolved Hide resolved

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

fix: Add react ErrorBoundary Component to prevent app crashes from unhandled errors #958

fix: Add react ErrorBoundary Component to prevent app crashes from unhandled errors #958

Uh oh!

monu808 commented Jan 5, 2026 •

edited

Loading

Uh oh!

coderabbitai bot commented Jan 5, 2026 •

edited

Loading

Walkthrough

Changes

Estimated code review effort

Poem

Uh oh!

coderabbitai bot left a comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

fix: Add react ErrorBoundary Component to prevent app crashes from unhandled errors #958

Are you sure you want to change the base?

fix: Add react ErrorBoundary Component to prevent app crashes from unhandled errors #958

Uh oh!

Conversation

monu808 commented Jan 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Demo:

Summary by CodeRabbit

Release Notes

Uh oh!

coderabbitai bot commented Jan 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Estimated code review effort

Poem

Pre-merge checks and finishing touches

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

monu808 commented Jan 5, 2026 •

edited

Loading

coderabbitai bot commented Jan 5, 2026 •

edited

Loading